<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回调函数形式的ref调用次数</title>
</head>
<body>
<div id="container">

</div>
</body>
</html>


<!--引入react核心库-->
<script type="text/javascript" src="../Js/react.development.js"></script>
<!--引入react-dom库,用于支持react操作dom-->
<script type="text/javascript" src="../Js/react-dom.development.js"></script>
<!--引入babel库,用于将jsx转成js-->
<script type="text/javascript" src="../Js/babel.min.js"></script>
<!--引入prop-types库,用于将对props进行类型限制-->
<script type="text/javascript" src="../Js/prop-types.js"></script>

<script type="text/babel">//此处一定要写text/babel，将jsx转成js


class Demo extends React.Component{

    state={
        isHot:true
    }

    savaInput=(node)=>{
        this.input1=node
    }

    showData=()=>{
        const {input1}=this
        console.log(input1.value)
    }

    changeWeather=()=>{
        const {isHot}=this.state
        this.setState({isHot: !isHot})
    }


    render(){
        return(
            <div>
                {/* ref以回调函数的形式绑定在内联的时候，每一次更新页面会调用两次*/}
                {/*<input   ref={(node)=>{
                    console.log("@",node)
                    this.input1=node
                }} type="text" placeholder="输入后点击按钮提示"/>*/}
                <input   ref={this.savaInput} type="text" placeholder="输入后点击按钮提示"/>&nbsp;&nbsp;&nbsp;&nbsp;
                <button onClick={this.showData}>点我</button>&nbsp;&nbsp;&nbsp;&nbsp;
                <h2>今天天气很{this.state.isHot===true?"炎热":"凉爽"}</h2>
                <button onClick={this.changeWeather}>点我切换天气</button>
            </div>
        )
    }
}

ReactDOM.render(<Demo/>,document.getElementById("container"))

</script>